// -----------------------------
// 一、基础题
// -----------------------------
// 1. 已知一个三角形的底为10，高为5，请尝试声明底和高两个变量，并求出这个三角形的面积，在控制台进行打印。
//  提示：三角形的面积=(底*高)/2
let d = 10;
let h = 5;
console.log("三角形的面积为："+(d*h/2));

// 2. 请编写一个程序，可以求出1到100之间所有偶数的和，并在控制台打印。
let sum = 0;
for (let i = 2; i<=100; i++) {
    if (i%2===0) {
        sum +=i;
    }
}
console.log(sum);

// // 3. 请使用相关数学函数在1 ~ 10000随机取一个数，并在控制台打印。

console.log(Math.floor(Math.random()*10000));

// 4. 请声明一个函数，传入参数为绩效分数score，根据如下规则进行判断并返回相关字符串：
//  90~100：返回 考核等级S，奖励3倍工资
//  80~89：返回 考核等级A，奖励2倍工资
//  70~79：返回 考核等级B，奖励1倍工资
//  60~69：返回 等级C，不奖励，需要继续努力
//  0~59：返回 考核等级D，考核较差，需要再观察或者劝退

let score = parseInt(window.prompt("请输入绩效分数："));
if (score >=90 && score<=100) {
    console.log("考核等级S，奖励3倍工资");
} else if (score>=80 && score<90){
    console.log("考核等级A，奖励2倍工资");
} else if (score>=70 && score<80) {
    console.log("考核等级B，奖励1倍工资");
} else if (score>=60 && score<70) {
    console.log("考核等级C，不奖励，需要继续努力");
} else if (score>=0 && score<60) {
    console.log("考核等级D，考核较差，需要再观察或者劝退");
}

// 5. 请声明一个函数，传入参数为正整数n，函数内计算n!，并返回结果。
//  提示：请注意对参数进行校验。
//  提示：n! = 1 * 2 * 3 * ... * n

function f1(n) {
    let r = 1;
    for (let i=1; i<=n; i++) {
        r*=i;
    }
    return r;
}
console.log(f1(2));

// 6. 请声明一个函数，传入参数为字符串str，在函数内移除str首尾空格，然后计算长度，并返回长度

function f2 (str) {
    return str.trim();
}
let str = "123456";
console.log(f2(str));

// // 7. 请声明一个匿名函数，传入参数为数组arr，在函数内对数组进行求和，并返回和。
// //  调用这个函数，传入数组参数：[10,30,50,22]，打印函数返回结果

let f3 = function (arr) {
    let sum = 0;
    for (let value of arr) {
        sum+=value
    }
    return sum
};
let arr = [10,30,50,22];
console.log(f3(arr));

// 8. 已知一个数组为：[ 1, 4, 3, 2 ]，
//  请使用数组相关的方法检测元素 3 在数组中是否存在，
//  存在则在控制打印出相应的下标，否则打印不存在。

// let arr2 = [1, 4, 3, 2];
// if (arr2.indexOf(3) !== -1) {
//     console.log(arr2.indexOf(3));
// } else {
//     console.log("不存在");
// }

// 9. 已知一个用户对象为：{id: 1, name: "庄周", desc: "辅助"}，
//  请尝试声明一个变量表示上面这个对象，
//  然后给这个对象增加一个性别属性，属性名称为：sex，属性值为：男。
//  最后在控制台打印这个对象。

let user = {id: 1, name: "庄周", desc: "辅助"};
user.sex = "男";
console.log(user);

// 10. 声明一个学生类，包含：姓名（name）、性别（gender）、生日字段（birthday）
//  实例化一个学生对象，学生相关属性为：
//      姓名：鬼谷子
//      性别：男
//      生日：2002-07-28
//  实例化完成之后，在控制台打印这个对象。

function Studnet (name,gender,birthday){
    this.name = name;
    this.gender = gender;
    this.birthday = birthday;
}
console.log(new Studnet("鬼谷子","男","2002-07-28"));

// -----------------------------
// 二、进阶题
// -----------------------------
// 提示：下面题目中，有说明要用jquery实现的，需要用jquery实现。否则使用原生的js或者jquery均可。


// 11. 请参考index.html中 <h4>页面跳转</h4> 栏目，
//  当点击百度时弹出确认框，提示信息：是否跳转到外部网站百度？
//  如果点击确认，则跳转到百度网址：https://www.baidu.com

document.getElementById("baidu").onclick = function() {
    if (window.confirm("是否跳转到外部网站百度")) {
        this.href="https://www.baidu.com";
    }
};


// 12. 参考index.html中 <h4>时钟</h4> 栏目，在 id=clock的标签中 显示当前时间，
//  时间显示格式：2020-12-02 20:28:50，时间每隔一秒会自行更新为当前时间。
//  提示：
//      可以先在标签内显示当前时间
//      再设置定时器更新时间。

// 13. 请参考index.html中 <h4>二级联动</h4> 栏目，
//  当选择父类时，子类下拉框可以更新为其子类选项，子类选项参考如下：
//      新闻子类：军事、图片、航空
//      体育子类：红彩、NBA、中超
//      时尚子类：女人、教育、亲子

let a = [
    {name:"军事",id:"1"},
    {name:"图片",id:"1"},
    {name:"航空",id:"1"},
    {name:"红彩",id:"2"},
    {name:"NBA",id:"2"},
    {name:"中超",id:"2"},
    {name:"女人",id:"3"},
    {name:"教育",id:"3"},
    {name:"亲子",id:"3"},
];

document.getElementById("parent").onchange = function() {
    document.getElementById("subclass").innerHTML = "";
    for (let t of a) {
        if (t.id == this.value) {
            let shang = document.createElement("option");
            shang.innerHTML = t.name;
            let subclass = document.getElementById("subclass");
            subclass.appendChild(shang);
        }
    }
};

// 14. 请参考index.html，<h4>登录表单</h4> 栏目，
//  当点击登录按钮的时候，对表单进行验证
//      其中各表单项格式为：
//          用户名格式：英文大小写字母均可，长度为：5~14个字符
//          密码格式：英文大小写字母、数字均可，长度为：8~14个字符
//          验证码格式：6位数字
//  验证失败不提交表单、并打印出相关错误信息，验证成功则提交表单。


// 15. 请参考index.html，<h4>商品数据追加到表格</h4> 栏目，
//      服务端返回了如下商品数据:
//       [
//           {id: 1, name: "三红蜜柚", price: 8},
//           {id: 2, name: "芒果", price: 6.5},
//           {id: 3, name: "哈密瓜", price: 7.8},
//           {id: 4, name: "云南石林人参果", price: 4.8},
//       ]
//  请将数据追加到栏目 <h4>商品数据追加到表格</h4> 下的表格，表格id=goods-list，
//  价格显示类似这样的格式：￥5.0元
let q = [

          {id: 1, name: "三红蜜柚", price: 8},
          {id: 2, name: "芒果", price: 6.5},
          {id: 3, name: "哈密瓜", price: 7.8},
          {id: 4, name: "云南石林人参果", price: 4.8},
];
for (let item of q) {
    console.log(q);
    let goods = document.getElementById("goods-list");
    let tt = document.createElement("tr");

    let html = "<td>"+item.id+"</td><td>"+item.name+"</td><td>￥"+item.price.toFixed(1)+"元</td>";
    tt.innerHTML=html

    goods.appendChild(tt);
}
// 16. 请参考index.html，<h4>分页效果显示</h4> 栏目，
//  当点击页码的时候，点击的页码背景色变成：#4CAF50，其余页码变成白色
//  点击 < 和 > 能实现进一页和退一页的效果。
//  ！！技术实现：请使用jquery实现！！


// 17. 请参考index.html，<h4>内容列表</h4> 栏目，
//  点击删除按钮，则提示：是否确认删除？如果确认删除，则移除本行。
//  点击审核按钮，则提示：是否确认审核？如果确认审核，则审核列字眼变成：已审核。相关按钮变成：取消审核
//  点击取消审核按钮，操作如上，只是功能相反。
//  ！！技术实现：请使用jquery实现！！
// $(document).ready(function(){
//     $(".delete-btn").click(function(){
//         console.log("你点了删除按钮");
//         console.log($(this));
//         $(this).parent().parent().css("font-size","1.2em");
//         if(window.confirm("是否确定删除")){
//             $(this).parent().parent().remove();
//         }
//     })
// });


// 18. 请参考index.html，<h4>全选和反选</h4> 栏目，
//  点击全选按钮，则选中兴趣爱好的所有选项
//  点击反选按钮，则选中的兴趣爱好取消选中，未选中的兴趣爱好勾选。
//  ！！技术实现：请使用jquery实现！！